//获取文章的列表数据
//GET
///my/article/list
const form = layui.form;
const baseUrl = 'http://api-breakingnews-web.itheima.net'
let token = localStorage.getItem('token')
let total=0
let query = {
    pagenum: 1,
    pagesize: 2,
    cate_id: '',
    state: '',

}
//发送请求
//渲染视图
function getList() {

    axios.get(`${baseUrl}/my/article/list`, {
        headers: {
            Authorization: token
        },
        params: query
    }).then((res) => {
        if (res.data.status === 0) {
            let arr = res.data.data;
            //遍历数组
            $(".layui-table tbody").empty();
            //创建标签
            arr.forEach(obj => {
                let theTr = `<tr>
                            <td>${obj.title}</td>
                            <td>${obj.cate_name}</td>
                            <td>${obj.pub_date}</td>
                            <td>${obj.state}</td>
                            <th>
                            <button myid="${obj.Id}" type="button" class="layui-btn layui-btn-xs layui-btn-danger del">删除</button>
                                </th>
                        </tr>`;
                //渲染视图
                $(".layui-table tbody").append(theTr);
            })
            //数据总数
            total = res.data.total
            //分页功能
            setPage()
        }
    })
}
getList()


//处理分页
function setPage() {
    //完整功能
    layui.use('laypage', function () {
        var laypage = layui.laypage;
    laypage.render({
        elem: 'page'//指向存放分页的容器，值可以是容器ID、DOM对象
        , count: total//数据总数。一般通过服务端得到
        , limit: query.pagesize //每页显示的条数。laypage将会借助 count 和 limit 计算出分页数。
        , limits: [2, 3, 5, 10]
        , layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'] //自定义排版
        , curr: query.pagenum  //起始页
        , jump: function (obj, first) {
            //obj包含了当前分页的所有参数，比如：
            // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
            // console.log(obj.limit); //  得到每页显示的条数
    
            //首次不执行
            if (!first) {
                //do something
                //请求得到当前页的数据和显示条数
                query.pagenum = obj.curr
                query.pagesize = obj.limit
                getList()
            }
        }
    });
    }) 
}

// 获取文章分类 => 下拉框的展示数据

axios.get(`${baseUrl}/my/article/cates`, {
    headers: {
        Authorization: token
    }
}).then((res) => {
    const { data, status } = res.data
    if (status === 0) {
        $("select[name=category]").append(`<option value="" lay-verify="cate">所有分类</option>`); // 默认选项- 默认获取所有分类
        data.forEach(obj => {
            var theOption = `<option value="${obj.Id}" lay-verify="cate">${obj.name}</option>`;
            $("select[name=category]").append(theOption);
        })
        // 让layui刷新一下form表单  
        layui.form.render('select', 'category');
    }
})

//3.筛选功能
//注册submit事件
$('.search').on('submit',(e)=>{
        e.preventDefault()
        //获取select下拉框的值
        const categoryVal = $('select[name="category"]').val()
        const stateVal = $('select[ name="state"]').val()
        query.cate_id = categoryVal
        query.state = stateVal
        //发送请求
        getList()
})
//4.删除
$('tbody').on('click','.del',function () {
    layer.confirm('确认要删除改文章吗?', {icon: 3, title:'温馨提示'}, function(index){
        //do something
        
        const id = $('.del').attr('myid')
        axios.get(`${baseUrl}/my/article/delete/${id}`,{
            headers:{
                Authorization:token
            }
        }).then((res)=>{
            if (res.data.status === 0) {
                getList()
                layer.msg(res.data.message)
            }
        })

        layer.close(index,'12');
        //测试合并冲突用
        console.log('123');
      });
}

)


